<template>
	<uni-popup background-color="#fff" type="center" ref="popupRef">
		<view class="show-panel">
			<view class="show-title">设备改价</view>
			<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
				<u-form-item class="form-item" label="代理1" labelWidth="80" prop="agent_id1">
					<cus-selects :closeSelect.sync="false" :data="agentList" :value="formData.agent_id1"
						placeholder="请输入关键字搜索" @change="changeAgent(1)" :clearable="true" :filterable="true"
						:searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio1">
					<up-input placeholder="请输入分配比例" border="surround" v-model="formData.allocation_ratio1"></up-input>
				</u-form-item>
				<u-form-item class="form-item" label="代理2" labelWidth="80" prop="agent_id2">
					<cus-selects :closeSelect.sync="false" :data="agentList" :value="formData.agent_id2"
						placeholder="请输入关键字搜索" @change="changeAgent(2)" :clearable="true" :filterable="true"
						:searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio2">
					<up-input placeholder="请输入分配比例" border="surround" v-model="formData.allocation_ratio2"></up-input>
				</u-form-item>
				<u-form-item class="form-item" label="代理3" labelWidth="80" prop="agent_id3">
					<cus-selects :closeSelect.sync="false" :data="agentList" :value="formData.agent_id3"
						placeholder="请输入关键字搜索" @change="changeAgent(3)" :clearable="true" :filterable="true"
						:searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio3">
					<up-input placeholder="请输入分配比例" border="surround" v-model="formData.allocation_ratio3"></up-input>
				</u-form-item>
			</u-form>

			<view class="footer">
				<view class="btn-group">
					<u-button class="btn" type="primary" size="normal" @click="allocate()">确认改价</u-button>
					<u-button class="btn" type="info" size="normal" @click="handleClose()">取消改价</u-button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		defineProps,
		onMounted,
		computed,
		watch,
		watchEffect
	} from 'vue';
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue';

	defineOptions({
		name: 'allocate-view'
	});

	onMounted(() => {
		console.log('组件已挂载', props.data);
		initData();
	});

	const props = defineProps({
		data: {
			type: Array,
			default: [],
		},
	});

	const state = reactive({
		formData: {
			additional_amount: 0,
			agent_id1: 0,
			allocation_ratio1: 0,
			agent_id2: 0,
			allocation_ratio2: 0,
			agent_id3: 0,
			allocation_ratio3: 0,
		}
	});

	const rules = ref([]);
	const formRef = ref(null);
	const agentList = ref([]);

	function initData() {
		getAgentList();
	}

	function getAgentList() {
		request.get('agent.agent/getAgentList').then(res => {
			console.log('代理列表', res);
			let data = res.data;
			data.forEach((item, index) => {
				if (item.agent_level >= 6) {
					agentList.value.push({
						text: item.id + '#' + item.name + '#' + item.contact_name + '(' + item
							.contact_phone + ')',
						label: item.id + '#' + item.name + '#' + item.contact_name + '(' + item
							.contact_phone + ')',
						value: item.id + ''
					});
				}
			})
		})
	}

	function changeAgent() {
		console.log('选择代理');
	}

	const popupRef = ref(null);

	function handleOpen() {
		popupRef.value.open();
	}

	function handleClose() {
		popupRef.value.close();
	}

	defineExpose({
		open: handleOpen,
		close: handleClose
	});

	const {
		formData,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.show-panel {
		margin: 24rpx;

		.show-title {
			text-align: center;
		}

		.form {
			.form-item {}
		}

		.footer {
			.btn-group {
				display: flex;

				.btn {
					width: 160rpx;
				}
			}
		}
	}
</style>